<!-- 测试界面1 -->
<script setup>
// #导出vue方法
import { ref } from "vue";
// -------------------------------------------------------------------

// #外部导入
// 加法hook
import useAdd from "../plugin/useAdd.js";
// 减法hook
import useSub from "../plugin/useSub.js";
// 监听鼠标移动位置
import useMouse from "../plugin/useMouse.js";

// 消息
import AcMessage from "../plugin/message/index.js";

// 网络状态
import useNetwork from "../plugin/useNetwork.js";
// -------------------------------------------------------------------

// 输入框数值
const inptutValue1 = ref(0);
const inptutValue2 = ref(0);

// 启动监听计算程序
const { addNum, addFn } = useAdd({ num1: inptutValue1, num2: inptutValue2 });
const { subNum, subFun } = useSub({ num1: inptutValue1, num2: inptutValue2 });

// 成功消息弹窗
const onBtnClick = (type, message) => {
	AcMessage({ type: type, message: message, timeClose: 4 });
};

// 鼠标移动的位置
const { x: mouseX, y: mouseY } = useMouse();

// 网络状态显示
const { lineStatus } = useNetwork({
	success: () => {
		console.log("回调-网络已连接");
		AcMessage({ message: "网络已连接", type: "success" });
	},
	fail: () => {
		console.log("回调-网络断开");
		AcMessage({ message: "网络断开", type: "error" });
	},
});
</script>
<template>
	<h1>测试界面1-自定义hook</h1>
	<div class="txt1">
		<span>num1:</span>
		<input v-model.number="inptutValue1" class="input-box" />
	</div>

	<div class="txt1">
		<span>num2:</span>
		<input v-model.number="inptutValue2" class="input-box" />
	</div>

	<div class="txt1">
		<span>加法结果:</span>
		<span>{{ addNum }}</span>
	</div>

	<div class="txt1">
		<span>减法结果:</span>
		<span>{{ subNum }}</span>
	</div>

	<div class="txt1">
		<span>鼠标位置-X:</span>
		<span>{{ mouseX }}</span>
		<span>鼠标位置-Y:</span>
		<span>{{ mouseY }}</span>
	</div>

	<div>
		<button @click.stop="onBtnClick('success', '成功')">成功消息</button>
		<button @click.stop="onBtnClick('error', '失败')">失败消息</button>
		<button @click.stop="onBtnClick('warning', '警告')">警告消息</button>
	</div>

	<div class="txt1">
		<span>网络状态:</span>
		<span>{{ lineStatus }}</span>
	</div>
</template>
<style scoped>
.txt1 {
	font-size: 36px;
}

.input-box {
	width: 100px;
	height: 60px;
	font-size: 30px;
}

button {
	margin: 12px;
}
</style>
